<template>
  <div class="memberTop" :class="{'vipContent': $store.state.app.accountInfo && $store.state.app.accountInfo.level}">
    <div class="flex memberTopCont">
      <div class="flex1">
        <span v-if="user && user.level">VIP {{ user.level }}</span>
        <span v-else>{{ $t('ndxStake.juniorMember') }}</span>
        <p>{{ $t('ndxStake.youLv') }}</p>
      </div>
      <!-- 消耗Ndx -->
      <div class="flex2">
        <span v-if="vipMode">{{ $t('renew.stakeNDX') }}</span>
        <span v-else>{{ $t('renew.consumeNDX') }}</span>
        <p>
          {{ $t('renew.upgradeType') }}
          <a class="shuhui" @click="handleChangeType" :class="{'gray': $store.state.app.scatter.chain !== 'eos'}">
           {{ $t('renew.replace') }}
          </a>
        </p>
      </div>
      <!-- 抵押量赎回 -->
      <div class="flex2" v-if="vipMode">
        <span>{{ handleToFixed(myStakeNdxALL, 4) || 0.0000 }} NDX</span>
        <p>{{ $t('ndxStake.ndxStake') }}
          <a class="shuhui" @click="handleMortgageNdxShow(2)">
            {{ $t('ndxStake.redeem') }}
          </a>
        </p>
      </div>
      <!-- 会员到期日 -->
      <div class="flex2" v-if="!vipMode">
        <span v-if="user.consumeLevel">{{ user && user.expireTime | dateFormat }}</span>
        <span v-else>-</span>
        <div class="dueDate">
          {{ $t('renew.vipExpire') }}
          <div v-if="user && user.consumeLevel" style="display: inline-block;">
          <!-- <div style="display: inline-block;"> -->
            <a class="shuhui" @click="handleRenew(1)" v-if="!user.isRenew">
              {{ $t('renew.renew') }}
            </a>
            <a class="shuhui gray" @click="handleRenewDetail" v-else>
              {{ $t('renew.renew') }}
            </a>
          </div>
        </div>
      </div>
      <div class="flex3">
        <span v-if="user && user.level === 0 && $store.state.app.language === 'zh-CN'">无</span>
        <span v-else-if="user && user.level === 0 && $store.state.app.language !== 'zh-CN'">0% off</span>
        <span v-else-if="user && user.level && $store.state.app.language === 'zh-CN'">
          {{ Number(accMul(user.discountRate, 10)) || 0 }}折
        </span>
        <span v-else-if="user && user.level && $store.state.app.language !== 'zh-CN'">
          {{ 100 - Number(accMul(user.discountRate, 100)) || 0 }}% off
        </span>
        <span v-else>{{ $t('ndxStake.none') }}</span>
        <p>{{ $t('ndxStake.serviceCharge1') }}</p>
      </div>
      <div class="flex4">
        <span>{{ handleToFixed(user ? user.totalSaveAmount: 0, 4) || 0.0000 }} EOS</span>
        <p>{{ $t('ndxStake.saveEos') }}</p>
      </div>
      <!-- 抵押消耗升级 -->
      <div class="flex5">
        <!-- @click="handleMortgageNdxShow(1)" -->
        <el-button
          @click="handleRenew(0)"
          class="button-open">
          <span v-if="user && user.level">{{ $t('ndxStake.tipsLv') }}</span>
          <span v-else>{{ $t('ndxStake.openMember3') }}</span>
        </el-button>
        <!-- <el-button
          v-else
          class="button-open Highest">
          <span>{{ $t('ndxStake.highLv') }}</span>
        </el-button> -->
      </div>
    </div>
    <div class="ndxTip" v-if="user && (user.stakeLevel > user.consumeLevel) && user.vipMode !== 1">
      * {{ $t('renew.replaceTip',{num:user.stakeLevel}) }}
    </div>
    <div class="ndxTip" v-if="user && (user.stakeLevel < user.consumeLevel) && user.vipMode !== 0">
      * {{ $t('renew.replaceTip2', {num:user.consumeLevel}) }}
    </div>
    <!-- 赎回抵押弹窗 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="mortgageNdxVisible"
      :close-on-click-modal="false"
      width="440px"
      center>
      <mortgage-ndx
      @listenStakeAction = "listenStakeAction"
      :mortgageNdxVisible = "mortgageNdxVisible"
      :MortgageStatus="MortgageStatus"/>
    </el-dialog>

    <!-- 二维码弹窗 -->
    <el-dialog
      class="dialogPay"
      :visible.sync="ndxStakePay"
      width="440px"
      center>
      <code-stake
      @listenStakeAction = "listenStakeAction"
      :MortgageStatus="MortgageStatus"/>
    </el-dialog>

    <!-- 更换弹窗 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="upgradeModeHide"
      width="440px"
      center
      :close-on-click-modal="false">
      <upgrade-mode
      :vipMode="vipMode"
      :user="user"
      :myStakeNdxALL="myStakeNdxALL"
      :selfStaked="selfStaked"
      :upgradeModeHide = "upgradeModeHide"
      @listenUpgradeMode = "listenUpgradeMode"/>
    </el-dialog>

    <!-- 已续费弹窗 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="renewDetailHide"
      width="440px"
      center
      :close-on-click-modal="false">
      <renew-detail
      :user="user"
      :renewDetailHide = "renewDetailHide"
      @listenRenewDetail = "listenRenewDetail"/>
    </el-dialog>

    <!-- 续费升级弹窗 -->
    <el-dialog
      @close="listenRenew"
      class="mortgageNdx"
      :visible.sync="renewHide"
      width="600px"
      center
      :close-on-click-modal="false">
      <renew
      :typeStatus = "typeStatus"
      :vipMode="vipModeFormat"
      :selfAccountInfo="user"
      :myStakeNdxALL="myStakeNdxALL"
      :renewHide="renewHide"
      @listenRenew="listenRenew"/>
    </el-dialog>
  </div>
</template>

<script>
import { accMul, toFixed, regIsRenew } from '@/utils/validate';
import MortgageNdx from '@/views/myWallet/member/components/MortgageNdx'; // 赎回抵押弹窗
import UpgradeMode from '@/views/myWallet/member/privilege/upgradeMode'; // 消耗抵押升级更换弹窗
import RenewDetail from '@/views/myWallet/member/privilege/renewDetail'; // 已续费详情弹窗
import Renew from '@/views/myWallet/member/privilege/renew'; // 已续费弹窗
import CodeStake from '@/views/myWallet/member/components/CodeStake'; // 钱包抵押下单扫码弹窗

export default {
  name: 'memberTop', // 会员头部介绍
  data() {
    return {
      mortgageNdxVisible: false,
      MortgageStatus: 0, // 1:抵押 2:赎回
      user: '', // 会员信息
      ndxStakePay: false, // 钱包扫码弹窗
      vipMode: 1, // 1-抵押等级 0-消耗等级
      vipModeFormat: 1, // 1-抵押等级 0-消耗等级
      upgradeModeHide: false, // 消耗抵押升级更换弹窗值
      renewDetailHide: false, // 已续费弹窗
      renewHide: false, // 续费升级弹窗
      typeStatus: 1, // 升级、续费 0-升级 1-续费
    }
  },
  components: {
    MortgageNdx, // 赎回抵押组件
    CodeStake,
    UpgradeMode, // 消耗抵押升级更换弹窗
    RenewDetail, // 已续费弹窗
    Renew, // 续费升级弹窗
  },
  props: {
    myStakeNdxALL: Number,
    selfStaked: Number,
  },
  watch: {
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
      this.vipMode = this.user && this.user.vipMode;
      this.vipModeFormat = this.user.vipMode;
      this.user.isRenew = regIsRenew(this.user);
    },
  },
  created() {
  },
  mounted() {
    this.user = this.$store.state.app.accountInfo;
    this.vipMode = this.user && this.user.vipMode;
    this.vipModeFormat = this.user.vipMode;
    this.user.isRenew = regIsRenew(this.user);
  },
  methods: {
    // 1:抵押 2:赎回
    handleMortgageNdxShow(val) {
      if (val === 1) {
        this.MortgageStatus = 1;
      }
      if (val === 2) {
        this.MortgageStatus = 2;
      }
      this.mortgageNdxVisible = true;
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    listenStakeAction(val) {
      if (val === 'close') {
        this.mortgageNdxVisible = false;
        return;
      }
      this.ndxStakePay = true;
    },
    // bos账号开通会员提醒
    handleMessage() {
      this.$message({
        message: `${this.$store.state.app.scatter.chain.toUpperCase()}${this.$t('bosChain.bosTip')}`,
        type: 'warning'
      });
    },
    // 更换消耗抵押升级
    handleChangeType() {
      const chain = this.$store.state.app.scatter.chain;
      if (chain !== 'eos') {
        this.$message({
          message: this.$t('renew.sideChainTip'),
          type: 'warning'
        });
        return;
      }
      this.upgradeModeHide = true;
    },
    // 选择升级方式回调
    listenUpgradeMode(key) {
      this.upgradeModeHide = false;
      if (key === 'sure') {
        this.vipMode = this.vipMode === 1 ? 0 : 1;
        this.vipModeFormat = this.vipModeFormat === 1 ? 0 : 1;
      }
    },
    // 已续费
    handleRenewDetail() {
      this.renewDetailHide = true;
    },
    // 已续费详情回调
    listenRenewDetail() {
      this.renewDetailHide = false;
    },
    // 续费升级
    handleRenew(typeStatus) {
      const chain = this.$store.state.app.scatter.chain;
      const tip = this.$t('renew.notSupport', { chain: chain.toUpperCase() });
      if (chain !== 'eos') {
        this.$confirm(tip, this.$t('public.reTip'), {
          confirmButtonText: this.$t('public.sure'),
          showCancelButton: false,
          center: true,
        }).then(() => {
        }).catch(() => {});
        return;
      }
      this.typeStatus = typeStatus;
      this.renewHide = true;
    },
    // 续费升级回调
    listenRenew(key, val) {
      this.renewHide = false;
      this.vipModeFormat = this.vipMode;
      if (key === 'upgradeMode-show') {
        this.upgradeModeHide = true;
      }
      if (key === 'updateUpgrade') {
        this.vipModeFormat = val;
        this.typeStatus = 0;
        setTimeout(() => {
          this.renewHide = true;
        }, 500);
      }
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';

$bg: #FCF1E3;
$yellow: #E5BC7E;
$noVipBg: rgb(241, 244, 254);

.memberTop {
  .memberTopCont {
    background: $noVipBg;
    padding: 28px 30px;
    border-radius: 5px;
    justify-content: space-around;
  }

  .ndxTip {
    margin-top: 10px;
    // color: #278EDA;
    color: $yellow !important;
  }

  .flex3 {
    text-align: center;
  }

  .flex1, .flex2, .flex3, .flex4 {
    span {
      font-size: 20px;
      display: block;
      padding-bottom: 10px;
      text-align: center;
    }

    p {
      font-size: 12px;
      display: block;
      color: #999;
      text-align: center;
    }
  }

  .flex1 {
    text-align: center;
    padding-right: 90px;
    border-right: 1px solid rgba(0, 0, 0, .2);
  }

  .flex2 {
    .dueDate {
      font-size: 12px;
      color: #999;

      a {
        font-size: 12px;
      }
    }
  }

  .shuhui {
    color: $yellow;
    margin-left: 5px;
    border-radius: 3px;
    padding: 2px 10px;
    border: 1px solid #E5BC7E;

    &.gray {
      color: #999;
      border-color: #999;
    }
  }
}

.vipContent {
  .memberTopCont {
    background: $bg;
  }

  .ndxTip {
    color: #FF9800;
  }
}

.button-open {
  background: linear-gradient(to right, #f9db8c , #f6a657);
  color: #753F05;
  border-color: $yellow;

  &:hover {
    opacity: 0.8;
  }
}

.button-gray {
  background: rgb(170, 170, 170);
  color: #fff;
  border-color: rgb(170, 170, 170);

  &:hover {
    opacity: 1;
  }
}

.Highest {
  background: gray;
  border-color: gray;
  color: #fff;
  &:hover {
    opacity: 1;
  }
}

.theme-1B1D27 {
  span {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .memberTopCont {
    background: rgb(21, 44, 88);
  }

  .button-open {
    span {
      color: #753F05 !important;
    }
  }
}
.dialogPay{
  /deep/ .el-dialog{
    background: url('../../../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}
// /deep/ .el-message-box__message {
//   padding: 0 30px;
// }
</style>
